<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <main>
        <h1>Multimedia Player</h1>
        <!-- 音频部分（第一个section） -->
        <section>
            <h2>Now Playing: Sailing Away</h2>
            <audio controls aria-label="Sailing Away audio">
                <source src="https://cdn.freecodecamp.org/curriculum/js-music-player/sailing-away.mp3" type="audio/mp3">
            </audio>
        </section>
        <!-- 视频部分（第二个section） -->
        <section>
            <h2>What is a map method and how does it work?</h2>
            <video controls width="600" aria-label="Video explaining the map method in JavaScript">
                <source
                    src="https://cdn.freecodecamp.org/curriculum/labs/What is the map method and how does it work.mp4"
                    type="video/mp4">
                <track
                    src="https://cdn.freecodecamp.org/curriculum/labs/What is the map method and how does it work.vtt"
                    kind="subtitles" srclang="en" label="English">
            </video>
        </section>
        <!-- 字幕部分（第三个section） -->
        <section>
            <h2>Transcript</h2>
            <p>
                What is a map method and how does it work? The map method is a powerful and widely used function in
                JavaScript that operates on arrays. It's designed to create a new array by applying a given function to
                each element of the original array. This method does not modify the original array, but instead returns
                the new array containing the results of the function applied to each element.
            </p>
        </section>
    </main>
</body>

</html>